<template>
<div class="login">
  <Header title="登录"></Header>
  <div class="img">美团</div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="data.username" name="username" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="data.password" type="password" name="password" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" color="#ffc400">
        登录
      </van-button>
      <van-button round block type="primary" native-type="submit" color="#ffc400" @click="toRegist()"
        style="margin-top: 20px;">
        没有账号去注册
      </van-button>
    </div>
  </van-form>
</div>
</template>

<script setup>
import { reactive } from 'vue';
import Header from '../../components/Header.vue';
let data = reactive({
  username: '',
  password: ''
})

import { useRouter } from 'vue-router';
import { Toast } from 'vant';
let router = useRouter()
const toRegist = () => {
  router.push('/regist')
}

const onSubmit = (value) => {
  if (!localStorage.userInfo) {
    Toast('账号不存在')
    return;
  } else {
    let userInfo = JSON.parse(localStorage.userInfo)
    if (userInfo['username'] == value['username']) {
      if (userInfo['password'] == value['password']) {
        Toast('登录成功');
        //存在本地。为一就是登录过
        localStorage.setItem('isLogin', '1')
        router.push('/home')
      } else {
        Toast('密码错误')
      }
    } else {
      Toast('用户名错误')
    }
  }
}
</script>

<style scoped>
.login {
  .img {
    width: 200px;
    height: 200px;
    background-color: #ffc400;
    font-size: 60px;
    line-height: 200px;
    text-align: center;
    border-radius: 40px;
    margin: 20px auto;
  }
}
</style>
